<!DOCTYPE html>
<html  class="language_zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="teedoc, 主题插件, 主题, 插件">
    <meta name="description" content="teedoc 主题插件">
    <meta name="generator" content="teedoc">
    <meta name="markdown-generator" content="teedoc-plugin-markdown-parser">
        <link rel="stylesheet" href="/static/css/theme_default/prism.min.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/theme_default/dark.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/theme_default/light.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/custom.css" type="text/css"/>
        <script src="/static/js/theme_default/jquery.min.js"></script>
        <script src="/static/js/theme_default/pre_main.js"></script>
        <link rel="stylesheet" href="/static/css/search/style.css" type="text/css"/>
        <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?91ac08174b63c5c88f71f8a94004a1fe";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
    <title>teedoc 主题插件 - teedoc</title>
</head>
<body>
    
            <div id="navbar">
                <div id="navbar_menu">
                    <a class="site_title" href="/"><img class="site_logo" src="/static/image/logo.png" alt="teedoc logo"><h2>teedoc</h2></a>
                    <a id="navbar_menu_btn"></a>
                </div>
                <div id="navbar_items">
                    <div>
                        <ul id="nav_left">
<li class="active"><a  href="/get_started/zh/">安装使用</a></li>
<li class=""><a  href="/develop/zh/">开发</a></li>
</ul>

                    </div>
                    <div>
                        <ul id="nav_right">
<li class=""><a target="_blank" href="https://github.com/neutree/teedoc">github</a></li>
<li class="sub_items "><a  href="">Language: 中文</a><ul><li class="active"><a  href="/get_started/zh/">中文</a></li>
<li class=""><a  href="/get_started/en/">English</a></li>
</ul></li>
</ul>

                        <ul class="nav_plugins"><li><a id="themes" class="light"></a></li></ul><ul class="nav_plugins"><li><a id="search"><span class="icon"></span><span class="placeholder">搜索</span>
                            <div id="search_hints">
                                <span id="search_input_hint">输入关键词，多关键词空格隔开</span>
                                <span id="search_loading_hint">正在加载，请稍候。。。</span>
                                <span id="search_download_err_hint">下载文件失败，请刷新重试或检查网络</span>
                                <span id="search_other_docs_result_hint">来自其它文档的结果</span>
                                <span id="search_curr_doc_result_hint">当前文档搜索结果</span>
                            </div></a></li></ul>
                    </div>
                </div>
            </div>
    
        <div id="wrapper">
            
            <div id="sidebar_wrapper">
                <div id="sidebar">
                    <div id="sidebar_title">
                        
                    </div>
                    <ul class="show">
<li class="not_active with_link"><a href="/get_started/zh/index.html"><span class="label">teedoc 简介</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/install/index.html"><span class="label">安装 teedoc</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/usage/start.html"><span class="label">开始写文档</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/usage/write_attention.html"><span class="label">写文档时需注意</span><span class=""></span></a></li>
<li class="active_parent with_link"><a href="/get_started/zh/plugins/index.html"><span class="label">插件</span><span class="sub_indicator"></span></a><ul class="show">
<li class="active with_link"><a href="/get_started/zh/plugins/themes.html"><span class="label">主题插件</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/plugins/others.html"><span class="label">其它插件</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/zh/syntax/syntax_markdown.html"><span class="label">markdown 语法</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/usage/deploy.html"><span class="label">部署</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active with_link"><a href="/get_started/zh/usage/deploy_github_pages.html"><span class="label">部署到 github</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/usage/deploy_nginx.html"><span class="label">使用 nginx 部署到服务器</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/usage/deploy_cdn.html"><span class="label">使用 CDN 加速网站</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/zh/usage/seo.html"><span class="label">SEO(为搜索引擎优化)</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/zh/usage/sites.html"><span class="label">使用了 teedoc 的网站</span><span class=""></span></a></li>
<li class="not_active no_link"><a><span class="label">更多样例</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active no_link"><a><span class="label">二级子目录样例</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active no_link"><a><span class="label">三级子目录样例</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active with_link"><a href="/get_started/zh/more/example_docs/doc1.html"><span class="label">文章1</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/zh/more/example_docs/doc2.html"><span class="label">文章2</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="https://github.com/teedoc/teedoc" target="_blank"><span class="label">这是一个外部链接</span><span class=""></span></a></li>
</ul>
</li>
</ul>

                </div>
            </div>
            <div id="menu_wrapper">
                                    <div id="menu">
                                    </div>
                                </div>
            <div id="article">
                <div id="content_wrapper">
                    <div id="content_body">
                        <div id="article_title">
                            <h1>teedoc 主题插件</h1>
                        </div>
                        <div id="article_tags">
                            <ul></ul>
                        </div>
                        <div id="article_content">
                            <h2 id="teedoc-plugin-theme-default"><code>teedoc-plugin-theme-default</code>: 默认主题插件</h2>

<h3 id="-1">插件配置</h3>

<p>在<code>site_config.json</code>中配置插件</p>

<pre><code class="json language-json">    "plugins": {
        "teedoc-plugin-theme-default":{
            "from": "pypi",
            "config": {
                "dark": true,
                "env":{
                    "main_color": "#4caf7d"
                },
                "css": "/static/css/custom.css",
                "js": "/static/js/custom.js",
                "code_highlight_css":  "/static/css/prism.css",
                "code_highlight_js": "/static/js/prism.js"
            }
        }
    }
</code></pre>

<ul>
<li><code>main_color</code>: 主题主颜色</li>
<li><code>css</code>: <code>css</code>文件 <code>URL</code>，可以覆盖默认的样式，会被插入到页面的<code>head</code>标签中</li>
<li><code>js</code>： <code>js</code>文件 <code>URL</code>，可以写<code>js</code>程序，会被放在页面的末尾加载</li>
</ul>

<p>默认代码高亮使用了<a href="https://prismjs.com/">prismjs</a>, 默认勾选了部分常用语言的支持，<code>js</code>文件 + <code>css</code>文件共<code>100KiB</code>左右，如果你需要的代码无法高亮，或者想节约流量或缩减加载时间，可以到<a href="https://prismjs.com/download.html#themes=prism-tomorrow&amp;languages=markup+css+clike+javascript+bash+c+cpp+cmake+coffeescript+docker+go+ini+java+json+json5+kotlin+latex+less+lua+makefile+markdown+markup-templating+objectivec+php+powershell+python+jsx+tsx+ruby+rust+sass+scss+shell-session+sql+swift+textile+typescript+yaml&amp;plugins=line-numbers+highlight-keywords+toolbar+copy-to-clipboard+match-braces">这里</a>查看默认勾选的以及勾选自己需要的语言和功能， 最后获得一个<code>css</code>文件和一个<code>js</code>文件放到<code>static/js/</code>目录下，然后需要在 <code>site_config.json</code> 中设置<code>URL</code>比如：</p>

<pre><code class="json language-json">    "route": {
        "assets": {
            "/static/": "static"
        }
    }
</code></pre>

<blockquote>
  <p>这会将<code>static</code>目录下所有文件拷贝到输出文件夹<code>static</code>目录下面</p>
</blockquote>

<ul>
<li><code>code_highlight_css</code>: <code>code</code>高亮<code>css</code>文件 <code>URL</code>，会取代默认的高亮<code>css</code>文件，会被插入到页面的<code>head</code>标签中</li>
<li><code>code_highlight_js</code>： <code>code</code>高亮<code>js</code>文件 <code>URL</code>，会取代默认的高亮<code>js</code>文件，会被放在页面的末尾加载</li>
</ul>

<p>支持 <code>白天</code> 和 <code>夜间</code> 模式， 夜间模式会在<code>body</code>加一个<code>dark</code>类， 如果要该夜间模式的<code>css</code>样式，可以基于这个类名修改</p>

<h3 id="class">class 支持</h3>

<p>主题支持几个常用的<code>class</code> 和 <code>id</code>， 可以在<code>config.json</code>(/<code>config.yaml</code>) 或者或者<code>.md</code>文件的<code>class</code>和<code>id</code>关键字中设置，就可以直接使用这个样式了</p>

<p>比如在<code>config.json</code>中设置</p>

<pre><code class="json language-json">{
    "class": "language_zh",
    "navbar": {
        ...
    }
}
</code></pre>

<p>则这个文档下面所有生成的页面的<code>html</code>标签都会包含这个类， 比如<code>language_zh</code>会让右边页面目录的标题从罗马数字变成中文<code>一、二、三...</code></p>

<p><code>class</code>有：</p>

<ul>
<li><code>language_zh</code>： 会让右边页面目录的标题从罗马数字变成中文<code>一、二、三...</code></li>
<li><code>md_page</code>: 普通 markdown 文件渲染成 html 页面，可以加上这个类，会居中显示而不是左对齐</li>
</ul>

                        </div>
                    </div>
                    <div id="previous_next">
                        <div id="previous">
                            <a href="/get_started/zh/plugins/index.html"><span class="icon"></span><span class="label">插件</span></a>
                        </div>
                        <div id="next">
                            <a href="/get_started/zh/plugins/others.html"><span class="label">其它插件</span><span class="icon"></span></a>
                        </div>
                    </div>
                </div>
                <div id="toc">
                    <div>
                        <ul>
  <li><a href="#teedoc-plugin-theme-default"><code>teedoc-plugin-theme-default</code>: 默认主题插件</a>
  <ul>
    <li><a href="#-1">插件配置</a></li>
    <li><a href="#class">class 支持</a></li>
  </ul></li>
</ul>

                    </div>
                </div>
            </div>
        </div>
        <a id="to_top" href="#"></a>
        <div id="doc_footer">
                        
            <div id="footer">
                <div id="footer_top">
                    <ul>
<li><a>链接</a><ul><li><a target="_blank" href="https://github.com/neutree/teedoc">使用 teedoc 构建</a></li>
<li><a target="_blank" href="https://neucrack.com">Copyright © 2021 Neucrack</a></li>
<li><a  href="/sitemap.xml">网站地图</a></li>
</ul>
</li>
<li><a>源码</a><ul><li><a target="_blank" href="https://github.com/neutree/teedoc">github</a></li>
<li><a target="_blank" href="https://github.com/teedoc/teedoc.github.io">本网站源文件</a></li>
</ul>
</li>
</ul>

                </div>
                <div id="footer_bottom">
                    <ul>
<li><a target="_blank" href="https://beian.miit.gov.cn">*ICP备********号-1</a></li>
<li><a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">*公网安备**************号</a></li>
</ul>

                </div>
            </div>
                    </div>
</body>
<script src="/static/js/theme_default/main.js"></script>
<script src="/static/css/theme_default/prism.min.js"></script>
<script src="/static/js/custom.js"></script>
<script src="/static/js/search/main.js"></script>
</html>
